
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
                xmlns:h="http://java.sun.com/jsf/html"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/templates/TCubeStaffTemplate.xhtml">
 
    <ui:define name="content">
        <p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>  
              
        <p:dialog modal="true" widgetVar="statusDialog" header="Status"   
                draggable="false" closable="false">  
            <p:graphicImage value="/images/ajaxloadingbar.gif" />  
        </p:dialog>  
        
        <h:form id="staffAccountRegister">
            <!-- LOCALIZATION -->
            <!-- this selectedLocale menu must always be at the top of the form -->
            <h:selectOneMenu id="selectedLocale" value="#{indexManagedBean.selectedLocale}">
                <f:selectItems value="#{enumLanguage.listItems}" />

                <p:ajax update="selectedLocale
                                accountStaffRegistration
                                panel
                                allMessages
                                panelGridStaffCreate
                                accountStaffUsernameLabel
                                accountStaffCheckUsernameButton
                                accountStaffPasswordLabel 
                                accountStaffConfirmPasswordLabel
                                accountStaffLastnameLabel
                                accountStaffFirstnameLabel
                                accountStaffGenderLabel
                                accountStaffBirthdateLabel
                                accountStaffCountryLabel
                                accountStaffLocaleLabel
                                accountStaffEmailSecondaryLabel
                                accountStaffDeptLabel
                                accountStaffJobPositionLabel
                                accountStaffJoinDateLabel
                                accountStaffAccessLabel
                                accountStaffCaptchaLabel
                                accountStaffRegisterButton" 
                        listener="#{indexManagedBean.selectedLocaleValueChangeListener}" />
            </h:selectOneMenu>
            <!-- this end selectedLocale menu must always be at the top of the form -->
            <!-- END LOCALIZATION-->
            
            
            
            <!-- panel for dividing web page into sections -->
            <p:panel id="panel" header="#{bundle['staffAccount.header.panel']}">  
                <p:messages id="allMessages"/>

                <h:panelGrid id="panelGridStaffCreate" columns="3"  cellpadding="5" >
                    <h:outputLabel id="accountStaffUsernameLabel" value ="#{bundle['staffAccount.username.label']}" style="font-weight: bold"/>
                    <p:inputText id="username" value="#{staffRegisterManagedBean.username}" required="true" requiredMessage="#{bundle['staffAccount.username.required']}" />
                    <p:message for="username"/>
                    
                
                    <h:outputLabel id="accountStaffLastnameLabel" value ="#{bundle['staffAccount.lastname.label']}" style="font-weight: bold"/>
                    <p:inputText id="lastname" value="#{staffRegisterManagedBean.lastname}" required="true" requiredMessage="#{bundle['staffAccount.lastname.required']}"/>
                    <p:message for="lastname"/>
                    
                    <h:outputLabel id="accountStaffFirstnameLabel" value="#{bundle['staffAccount.firstname.label']}" style="font-weight: bold"/>
                    <p:inputText id="firstname" value="#{staffRegisterManagedBean.firstname}" required="true" requiredMessage="#{bundle['staffAccount.firstname.required']}"/>
                    <p:message for="firstname"/>
                    
                    <h:outputLabel id="accountStaffGenderLabel" value="#{bundle['staffAccount.gender.label']}" style="font-weight: bold"/>
                    <h:selectOneMenu id="gender" value="#{staffRegisterManagedBean.gender}" required="true" requiredMessage="#{bundle['staffAccount.gender.required']}">
                        <f:selectItems value="#{enumGender.listItems}"/>
                    </h:selectOneMenu>
                    <p:message for="gender"/>
                    
                    <h:outputLabel id="accountStaffBirthdateLabel" value ="#{bundle['staffAccount.birthdate.label']}" style="font-weight: bold" />
                    <p:calendar id="birthdate" value="#{staffRegisterManagedBean.birthdate}" locale="US" showOn="button" navigator="true" required="true" requiredMessage="#{bundle['staffAccount.birthdate.required']}" >
                        <f:convertDateTime dateStyle="default" locale="zh_CN" timeZone="GMT" pattern="MM/dd/yyyy"/>
                    </p:calendar>
                    <p:message for="birthdate"/>
                    
                    <h:outputLabel id="accountStaffCountryLabel" value ="#{bundle['staffAccount.country.label']}" style="font-weight: bold"/>
                    <h:selectOneMenu id="country" value="#{staffRegisterManagedBean.country}" required="true" requiredMessage="#{bundle['staffAccount.country.required']}">
                        <f:selectItems value="#{enumCountry.listItems}"/>
                    </h:selectOneMenu>
                    <p:message for="country"/>
                    
                    <h:outputLabel id="accountStaffLocaleLabel" value ="#{bundle['staffAccount.languagepreferred.label']}" style="font-weight: bold"/>
                    <h:selectOneMenu id="locale" value="#{staffRegisterManagedBean.locale}" required="true" requiredMessage="#{bundle['staffAccount.languagepreferred.required']}">
                        <f:selectItems value="#{enumLanguage.listItems}"/>
                    </h:selectOneMenu>
                    <p:message for="locale"/>
                    
                    <h:outputLabel id="accountStaffEmailLabel" value ="#{bundle['staffAccount.email.label']}" style="font-weight: bold"/>
                    <p:inputText id="email" value="#{staffRegisterManagedBean.email}" validatorMessage="#{bundle['staffAccount.username.validatorEmailFormat']}"/>
                    <p:message for="email"/>
                    
                    <h:outputLabel id="accountStaffEmailSecondaryLabel" value ="#{bundle['staffAccount.emailSecondary.label']}" style="font-weight: bold"/>
                    <p:inputText id="emailSecondary" value="#{staffRegisterManagedBean.emailSecondary}" validatorMessage="#{bundle['staffAccount.username.validatorEmailFormat']}">
                        <f:validator validatorId="checkValidEmail" />
                    </p:inputText>
                    <p:message for="emailSecondary"/>
                    
                    <h:outputLabel id="accountStaffDeptLabel" value ="#{bundle['staffAccount.department.label']}" style="font-weight: bold"/>
                    <h:selectOneMenu id="dept" value="#{staffRegisterManagedBean.department}" required="true" requiredMessage="#{bundle['staffAccount.department.required']}">
                        <f:selectItems value="#{enumDepartment.listItems}"/>
                    </h:selectOneMenu>
                    <p:message for="dept"/>
                    
                    <h:outputLabel id="accountStaffJobPositionLabel" value ="#{bundle['staffAccount.jobposition.label']}" style="font-weight: bold"/>
                    <h:selectOneMenu id="jobposition" value="#{staffRegisterManagedBean.jobPosition}" required="true" requiredMessage="#{bundle['staffAccount.jobposition.required']}">
                        <f:selectItems value="#{enumJobPosition.listItems}"/>
                    </h:selectOneMenu>
                    <p:message for="jobposition"/>
                    
                    <h:outputLabel id="accountStaffJoinDateLabel" value ="#{bundle['staffAccount.joindate.label']}" style="font-weight: bold" />
                    <p:calendar id="joindate" value="#{staffRegisterManagedBean.joinDate}" showOn="button" showButtonPanel="true" navigator="true" required="true" requiredMessage="#{bundle['staffAccount.joindate.required']}"/>
                    <p:message for="joindate"/>
                    
                    <h:outputLabel id="accountStaffAccessLabel" value ="#{bundle['staffAccount.accessrights.label']}" style="font-weight: bold" />
                    <h:selectManyCheckbox layout="pageDirection" required="true" requiredMessage="#{bundle['staffAccount.accessrights.required']}" id="accessRights" value="#{staffRegisterManagedBean.accessRightsList}" converter="accessRightsConverter">
                        <f:selectItems value="#{enumAccessRight.listItems}" />
                    </h:selectManyCheckbox>
                    <p:message for="accessRights"/>
                    
                    <h:outputLabel id="accountStaffCaptchaLabel" value ="#{bundle['staffAccount.captcha.label']}" style="font-weight: bold" />
                    <p:captcha id="captcha" required="true" requiredMessage="staffAccount.captcha.required" label="#{bundle['staffAccount.captcha.label']}" /> 
                    <p:message for="captcha"/>
                    
                </h:panelGrid>
                
                <p:ajaxStatus style="width:16px;height:16px;">
                    <f:facet name="start">
                        <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif"/>
                    </f:facet>
                    <f:facet name="complete">
                        <h:outputText value="" />
                    </f:facet>
                </p:ajaxStatus>
                <p:commandButton id="accountStaffRegisterButton" value="#{bundle['staffAccount.register.button']}" update="panel" actionListener="#{staffRegisterManagedBean.registerStaff}" ajax="false"  />
            </p:panel> 

        </h:form>
    </ui:define>
</ui:composition>

